<template>
  <div id="Site" :style="{minHeight: currHeight + 'px'}">
    <!-- 导航栏 -->
    <van-nav-bar title="我的地址" left-text="返回" left-arrow
        @click-left="onClickLeft"
             @click-right="onClickRight"
    >
      <van-icon name="ellipsis" slot="right" />
    </van-nav-bar>
    <!-- 内容 -->
    <div class="content">
        <!-- 第一个地址 -->
        <div class="first_site" 
        v-for="(item,index) in lists"
        :key="index">
            <p class="site_name">{{item.name}}<span class="phone">{{item.phone}}</span></p>
            <p class="specific_address">{{item.site}}</p>
            <div v-if="item.flag" class="default">默认</div>
        </div>
        <!-- 添加地址 -->
        <router-link to='/Address'>
          <div class="add_site">
              添加新地址
          </div>
        </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Hipline',
  data () {
    return {
        lists:[{
            index:1,
            name:"李先生",
            phone:"13423433424",
            site:"广东省佛山市禅城区印象购物中心5号楼b-1011221902室",
            flag:true
        },
        {
            index:2,
            name:"李先生",
            phone:"13423433424",
            site:"广东省佛山市禅城区印象购物中心5号楼b-1011221902室",
            flag:false
        }
        ],
        currHeight:''
    }
  },
  methods: {
  onClickLeft() {
      
      this.$router.go(-1)
    },
    onClickRight() {
      
    },
    showPopup() {
      this.show = true;
    },
  },
  mounted(){
    this.currHeight = document.documentElement.clientHeight
    window.onresize = () => {
      this.currHeight = document.documentElement.clientHeight     
    }
  } 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
#Site{
    background:#eeeeee;
}
.content{
    box-sizing: border-box;
    padding-top:90px;
    .first_site{
        width:100%;
        height:170px;
        background-color: #ffffff;
        .site_name{
            margin-top:20px;
            font-size:30px;
            box-sizing: border-box;
            padding-top: 20px;
            margin-left: 46px;
        }
        .phone{
            font-size:30px; 
            margin-left:23px; 
        }
        .specific_address{
            width:79%;
            margin-left: 46px;
            font-size: 24px;
             word-break:break-all;
        }
    }
    .default{
        float:right;
        font-size:20px;
        width:66px;
        height:68px;
        background-color: #ffa1a1;
        border-radius: 50%;
        color:white;
        text-align: center;
        line-height: 68px;
        border:1px solid red;
        margin-top:-90px;
        margin-right:20px;
    }
    .add_site{
        width:95%;
        background-color: #234497;
        height:100px;
        text-align:center;
        margin:0 auto;
        color:#ffffff;
        margin-top:20px;
        line-height: 100px;
        border-radius: 4px;
        font-size: 28px;
    }
}
</style>
